<template>
	<view class="page">
		<p-navbar title="设置"></p-navbar>
		<view class="main">
			<view class="main-border">
				<view class="main-item flex align-items" :data-a="index" v-for="(item,index) in list" :key="index" @tap="Jump(item)">
					<text>{{item.name}}</text>
					<view style="margin-left: auto; color: #333">
						{{item.name=='手机号码'?tings(item.text):item.text}}
						<image v-if="item.is" class="img2" src="../../static/user/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 账户管理 -->
		<u-popup v-model="shows" mode="bottom">
			<view class="titles" >
				账 号 
			</view>
			<scroll-view scroll-y="true"   class="divContainer">
				<view class="list"  v-for="(item,index) in account" @tap="btn(item,index)">{{item.name}}</view>
			</scroll-view>
		</u-popup>
		
		<!-- 输入昵称 -->
		<u-popup v-model="nameshow" mode="center" class="popups">
			<view class="names" >
				<view class="names-title">
					输入昵称
				</view>
				<input type="text" value="" placeholder="请输入 昵称1~10位" /> 
				<view class="btn flex align-items">
					<view class="btn1" @tap="nameshow=!nameshow">
						取消
					</view>
					<view class="btn1">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<view class="signOut" @tap="signOut">
			退出登录
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						name:'账户管理',
						text:uni.getStorageSync('Login').userName,
						is:true
					},
					{
						name:'昵称',
						text:uni.getStorageSync('Login').name,
						is:false
					},
					{
						name:'手机号码',
						text:uni.getStorageSync('Login').phone,
						is:false
					},
					{
						name:'UID',
						text:uni.getStorageSync('Login').id,
						is:false
					},
				],
				shows:false,
				nameshow:false,
				account:[
				],
			}
		},
		computed:{
			tings(){
				return t=>{
					if(!t) return '无';
					return t.substring(0,3)+"***"+t.substring(t.length-4,t.length)
				}
			},
		},
		onLoad() {
			
			this.request('userNameList').then(res=>{
				console.log(res.data.data)
				this.account=res.data.data
			})
		},
		methods: {
			Jump(item){
				if(item.name=='账户管理'){
					this.shows=true
					this.request.post('userNameList', {
					}).then(res=>{
						this.account = res.data.data
					})
				}
				// if(item.name=='昵称'){
				// 	this.nameshow=true
				// }
			},
			btn(item){//切换账号
				this.request('cutUser?userName='+item.userName).then(res=>{
					if(res.data.code=='1'){
						uni.removeStorageSync('Login');
						 this.$forceUpdate()//强制更新
						this.$state.userinfo={}
						uni.setStorageSync('Login',res.data.data)//账号缓存
						this.$Router.replaceAll({
							path: '/pages/home/home'
						})
					}
				})
			},
			// 退出登录
			signOut(){
				this.request.post('logout', {
				}).then(res=>{
					 uni.removeStorageSync('Login');
					 this.$forceUpdate()//强制更新
					this.$state.userinfo={}
					this.$Router.replaceAll({
						path: '/pages/login/login'
					})
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style lang="scss">
	.page{
		position: relative;
	}
	.main{
		.main-border{
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			// border: 1px solid rgba(22, 119, 255, 0.05);
			border-radius: 16rpx;
		}
		.main-item{
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #E6E6E6;
			.img1{
				width: 26rpx;
				height: 26rpx;
				margin-right: 20rpx;
			}
			text{
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 400;
				color: #333333;
			}
			.img2{
				width: 12rpx;
				height: 20rpx;
				margin-left: 20rpx;
			}
		}
		.main-item[data-a='4']{
			border: none;
		}
	}
	.titles{
		background-color: $color-bgs;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 100rpx;
		border-bottom: 1rpx solid $border;
		text-align: center;
		color: #333333;
		text{
			float: right;
			padding-right:40rpx;
			font-size: 24rpx;
			color: #333333;
		}
	}
	.divContainer {
	background-color: $color-bgs;
	  overflow: scroll;
	  height: 250px;
	}
	.list{
		width: 100%;
		text-align: center;
		border-bottom: 1rpx solid $border;
		padding: 20rpx 10rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
		 @include click;
		 background-color: $color-bgs;
	}
	/deep/ .u-drawer-bottom {
	       bottom: 0;
	       left: 0;
	       right: 0;
	       background-color: $color-bgs;
	}
	.names{
		width: 678rpx;
		height: 362rpx;
		color: #333;
		background: #021E3E;
		padding: 40rpx 20rpx;
		border-radius: 16rpx;
		font-family: PingFang;
		font-size: 36rpx;
		.names-title{
			text-align: center;
			font-weight: 400;
		}
		input{
			width: 638rpx;
			height: 100rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 16rpx;
			margin: 40rpx 0;
			padding: 20rpx;
			box-sizing: border-box;
		}
		.btn1{
			width: 50%;
			text-align: center;
		}
	}
	/deep/ .u-mode-center-box{
		background-color:transparent !important;
		border-radius: 16rpx !important;
	}
	
	.signOut{
		width: 678rpx;
		height: 88rpx;
		background: $light-color;
		border-radius: 16rpx;
		margin: 620rpx auto 64rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: 400;
		color: #fff;
	}
	
</style>
